<template>
  <div>
    <!-- 搜索栏 -->
    <div class="searchBar">
      <div class="searchItem">
        <el-input placeholder="九龙塘" class="inp1" prefix-icon="el-icon-search"></el-input>
        <div class="inp2" style="width: 280px;">
          <img src="../../../static/listPage/Limg01.jpg" alt="" width="60">
          <span class="vertical" style="left: 75px;">|</span>
          <el-input placeholder="300尺" style="width: 70px;"></el-input>
          <span class="line">-------</span>
          <el-input placeholder="500尺" style="width: 70px;left: 60px;"></el-input>
        </div>

        <div class="inp2">
          <img src="../../../static/listPage/Limg02.jpg" class="img2" alt="" width="30">
          <span class="vertical">|</span>
          <el-input placeholder="300尺" style="width: 70px;"></el-input>
          <span class="line">-------</span>
          <el-input placeholder="500尺" style="width: 70px;left: 60px;"></el-input>
        </div>

        <div class="inp2">
          <img src="../../../static/listPage/Limg03.jpg" class="img2" alt="" width="25">
          <span class="vertical">|</span>
          <el-input placeholder="2房" style="width: 70px;"></el-input>
          <span class="line">-------</span>
          <el-input placeholder="3房" style="width: 70px;left: 60px;"></el-input>
        </div>
        <el-button type="primary" class="seartBtn">搜出好卖</el-button>
      </div>
    </div>
    <!-- 筛选框  -->
    <div class="screenBox">
      <div class="screenItem">
        <div class="ItemSon" style="border-left:1px solid #ccc;">
          <h3>筛选条件</h3>
        </div>
        <div class="ItemSon">
          <p>住宅</p>
          <el-select placeholder="不限">
            <el-option>
            </el-option>
          </el-select>
        </div>
        <div class="ItemSon">
          <p>住宅类型</p>
          <el-select placeholder="不限">
            <el-option
             >
            </el-option>
          </el-select>
        </div>
        <div class="ItemSon">
          <p>楼龄</p>
          <el-select placeholder="不限">
            <el-option
             >
            </el-option>
          </el-select>
        </div>
        <div class="ItemSon">
          <p>建筑面积</p>
          <el-select placeholder="不限">
            <el-option
              >
            </el-option>
          </el-select>
        </div>
        <div class="ItemSon">
          <p>景观</p>
          <el-select placeholder="不限">
            <el-option
             >
            </el-option
             >
          </el-select>
        </div>
        <div class="ItemSon" style="border: none;">
          <el-button class="btn btn01">分享搜索结果</el-button>
        </div>
        <div class="ItemSon" style="border: none;">
          <el-button class="btn btn02">清空筛选</el-button>

        </div>
      </div>
    </div>
    <!-- 主体内内容   -->
    <div class="subjectBox">
      <div class="contentBox" v-show="explicitImplicitMap">
        <!-- 楼房地图模式-->
        <div class="listContent">
          <div class="tabs">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="全部楼盘" name="first">
                <div class="commodity">
                  <!-- 排序名字  -->
                  <div class="sort">
                    <div class="sortName">
                      <span>找到1250间房屋</span>
                    </div>
                    <div class="sortName">
                      <span>更新时间
                        <i class="el-icon-top"></i>
                        <i style="color: #ffd101" class="el-icon-bottom"></i>
                      </span>
                    </div>
                    <div class="sortName">
                      <span>建筑面积
                         <i class="el-icon-top"></i>
                        <i style="color: #ffd101" class="el-icon-bottom"></i>
                      </span>
                    </div>
                    <div class="sortName">
                      <span>价格
                         <i class="el-icon-top"></i>
                        <i style="color: #ffd101" class="el-icon-bottom"></i>
                      </span>
                    </div>
                    <div class="sortName">
                      <span>总浏览
                         <i class="el-icon-top"></i>
                        <i style="color: #ffd101" class="el-icon-bottom"></i>
                      </span>
                    </div>
                  </div>
                  <!--  楼房展示  -->
                  <div class="exhibition">
                    <router-link to="/details">
                    <div class="cardItem"  >
                      <div class="exhibitionImg">
                        <img src="../../../static/listPage/Limg05.jpg" alt="">
                        <img class="imgJ" src="../../../static/listPage/Limg06.jpg" alt="">
                      </div>
                      <div class="exhibitionInfo">
                        <div class="titleName" style="position: relative;">
                          <h3 style="padding-top: 10px;color: #000000">超巨3房，实用率高，环境清净</h3>
                          <span>
                            <img style="position: absolute;right: 10px;top: 10px;"
                                 src="../../../static/listPage/Limg1.jpg" width="30px" alt="">
                          </span>
                        </div>
                        <div class="sotes">
                          <span>住宅屋菀</span>
                          <span>|</span>
                          <span>开放式</span>
                          <span>|</span>
                          <span>155尺</span>
                          <span>|</span>
                          <span>高夏</span>
                          <span>|</span>
                          <span>1 分钟内更新</span>
                        </div>
                        <div class="addName" style="color: #000000;">
                          <span>九龙塘 </span>
                          <span> 翡翠园</span>
                        </div>
                        <div class="priceName">
                          <span style="color: #d0b174;">豪华装修</span>
                          <span style="color: #b96a72;">设备齐全</span>
                          <span style="float:right;background-color:#fff;color: #fb9b10;font-size: 14px;">$2,380万</span>
                        </div>
                        <div class="sizeName">
                          <span style="color: #83a5c5;padding: 5px;">钥匙</span>
                          <span style="float: right;margin-right: 6px;padding-left: 10px;color: #8cabc3;">建筑1036尺</span>
                          <span style="float: right">|</span>
                          <span style="float: right;padding-right: 10px;color: #cda966">实用736尺</span>


                        </div>
                        <div class="sizeName" style="margin-top: -25px;">
                          <span style="float: right;margin-right: 10px;padding-left: 10px;color: #999999;">$31,192/尺</span>
                          <span style="float: right">|</span>
                          <span style="float: right;padding-right: 10px;color: #999999;">$31,192/尺</span>
                        </div>
                      </div>
                    </div>
                    </router-link>
                    <router-link to="/details">
                    <div class="cardItem" v-for="(item,index) in [1,2,3,4,5]" :key="index">
                      <div class="exhibitionImg">
                        <img src="../../../static/listPage/Limg05.jpg" alt="">
                        <img class="imgJ" src="../../../static/listPage/Limg06.jpg" alt="">
                      </div>
                      <div class="exhibitionInfo">
                        <div class="titleName" style="position: relative;">
                          <h3 style="padding-top: 10px;color: #000000;">超巨3房，实用率高，环境清净</h3>
                          <span>
                            <img style="position: absolute;right: 10px;top: 10px;"
                                 src="../../../static/listPage/Limg07.jpg" alt="">
                          </span>
                        </div>
                        <div class="sotes">
                          <span>住宅屋菀</span>
                          <span>|</span>
                          <span>开放式</span>
                          <span>|</span>
                          <span>155尺</span>
                          <span>|</span>
                          <span>高夏</span>
                          <span>|</span>
                          <span>1 分钟内更新</span>
                        </div>
                        <div class="addName" style="color: #000000;">
                          <span>九龙塘 </span>
                          <span> 翡翠园</span>
                        </div>
                        <div class="priceName">
                          <span style="color: #d0b174;">豪华装修</span>
                          <span style="color: #b96a72;">设备齐全</span>
                          <span style="float:right;background-color:#fff;color: #fb9b10;font-size: 14px;">$2,380万</span>
                        </div>
                        <div class="sizeName">
                          <span style="color: #83a5c5;padding: 5px;">钥匙</span>
                          <span style="float: right;margin-right: 6px;padding-left: 10px;color: #8cabc3;">建筑1036尺</span>
                          <span style="float: right">|</span>
                          <span style="float: right;padding-right: 10px;color: #cda966">实用736尺</span>


                        </div>
                        <div class="sizeName" style="margin-top: -25px;">
                          <span style="float: right;margin-right: 10px;padding-left: 10px;color: #999999;">$31,192/尺</span>
                          <span style="float: right">|</span>
                          <span style="float: right;padding-right: 10px;color: #999999;">$31,192/尺</span>
                        </div>
                      </div>
                    </div>
                    </router-link>
                  </div>
                </div>

              </el-tab-pane>
              <el-tab-pane label="业主盘" name="second">业主盘</el-tab-pane>
            </el-tabs>
            <div class="pageChange"  @click="changePagesMap"><img src="../../../static/listPage/Limg04.jpg" alt="">列表模式</div>
          </div>
        </div>
        <!-- 地图-->
        <div class="mapContent">
          <img src="../../../static/listPage/map.jpg" width="600" height="750" alt="">
        </div>


      </div>
      <!--   楼房列表模式     -->
      <div class="listPattern" v-show="explicitImplicit">
        <div style="margin-top: 15px;cursor: pointer;">
           <h3 style="margin-right: 30px;text-align: right;margin-top: -20px;z-index: 99" @click="changePagesList">
          <img src="../../../static/listPage/Limg13.jpg" alt="" >地图模式</h3>
        </div>
        <div style="margin-top: 0;">
          <el-tabs v-model="activeName"  style="z-index: -1" type="card" >

            <el-tab-pane label="全部楼盘" name="first">
              <!-- 排序名字  -->
              <div class="commodity">

                <div class="sort">
                  <div class="sortName" style="position: absolute;left: 0;">
                    <span>找到1250间房屋</span>
                  </div>
                  <div class="sortName">
                      <span>更新时间
                        <i class="el-icon-top"></i>
                        <i style="color: #ffd101" class="el-icon-bottom"></i>
                      </span>
                  </div>
                  <div class="sortName">
                      <span>建筑面积
                         <i class="el-icon-top"></i>
                        <i style="color: #ffd101" class="el-icon-bottom"></i>
                      </span>
                  </div>
                  <div class="sortName">
                      <span>价格
                         <i class="el-icon-top"></i>
                        <i style="color: #ffd101" class="el-icon-bottom"></i>
                      </span>
                  </div>
                  <div class="sortName">
                      <span>总浏览
                         <i class="el-icon-top"></i>
                        <i style="color: #ffd101" class="el-icon-bottom"></i>
                      </span>
                  </div>
                </div>
              </div>
              <div class="listCart" v-for="item in [1,2,3,4,5]">
                <div class="listImg">
                  <img src="../../../static/listPage/Limg08.png" alt="">
                </div>
                <div class="floorInfo">
                  <div class="floorType">
                    <h2>超巨三房，实用率高，环境清净</h2>
                    <img src="../../../static/listPage/Limg07.jpg" alt="">
                  </div>
                  <div class="floorStyle">
                    <p>住宅屋菀开放式155尺高夏1分钟内更新</p>
                  </div>
                  <div class="floorAdd">
                    <p>九龙塘 翡翠园</p>
                  </div>
                  <div class="floorNum">
                    <div class="floorNumL">
                      <div class="imgInfo">
                        <div>
                          <img src="../../../static/listPage/Limg09.png" alt="">
                        </div>
                        <div class="txtInfo">
                          <span>房间数量</span><br/>
                          <span>3</span>
                        </div>
                      </div>
                      <div class="imgInfo">
                        <div>
                          <img src="../../../static/listPage/Limg10.png" alt="">
                        </div>
                        <div class="txtInfo">
                          <span>楼层</span><br/>
                          <span>3</span>
                        </div>
                      </div>
                    </div>
                    <div class="floorNumR">
                      <span>+加油入对比</span>
                    </div>
                  </div>
                  <div class="floorNum">
                    <div class="floorNumL">
                      <div class="imgInfo">
                        <div>
                          <img src="../../../static/listPage/Limg11.png" alt="">
                        </div>
                        <div class="txtInfo">
                          <span>实用比率</span><br/>
                          <span>72%</span>
                        </div>
                      </div>
                      <div class="imgInfo">
                        <div>
                          <img src="../../../static/listPage/Limg12.png" alt="">
                        </div>
                        <div class="txtInfo">
                          <span>楼层</span><br/>
                          <span>33</span>
                        </div>
                      </div>
                    </div>
                    <div class="floorNumR">
                      <span style="padding: 0;background-color:#ffffff;color: #fb9b10;">+$2,380万</span>
                    </div>
                  </div>
                  <div class="floorSizes">
                    <div class="infoBtn">
                      <span style="color: #d0b174">豪华装修 </span>
                      <span style="color: #b96a72">设备齐全</span>
                      <span style="color: #83a5c5">钥匙</span>
                    </div>
                    <div>
                      <span style="color: #cda966">实用736尺|</span>
                      <span style="color: #8cabc3;">建筑1036尺</span><br>
                      <span style="color: #8cabc3;">$31,192/尺|</span>
                      <span style="color: #8cabc3;">$31,192/尺</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="业主盘" name="second">
              业主盘
            </el-tab-pane>
          </el-tabs>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import 'element-ui/lib/theme-chalk/index.css';
  export default {

    name: 'listMap',
    data() {
      return {
        activeName: "first",
        explicitImplicitMap:true,
        explicitImplicit:false
      }
    },
    methods:{
      changePagesMap(){
        this.explicitImplicit = true;
        this.explicitImplicitMap = false;
      },
      changePagesList(){
        this.explicitImplicitMap = true;
        this.explicitImplicit=false;
      }
    }
  }
</script>

<style>

  /*<!-- 搜索栏 -->*/
  .searchBar {
    width: 100%;
    height: 100px;
    background-color: #ad2022;

  }

  .searchBar .searchItem {
    width: 1200px;
    height: 100px;
    /*border: 1px solid #fff;*/
    margin: 0 auto;
    line-height: 100px;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-flow: row;
    position: relative;


  }

  .searchBar .searchItem .inp1 {
    width: 170px;
    height: 60px;
  }

  .searchBar .searchItem .inp2 {
    width: 260px;
    height: 40px;
    background-color: #fff;
    margin: 30px 0 0 30px;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: center;
    flex-flow: row;
    flex-direction: row;
  }

  .searchBar .searchItem .inp2 img {
    position: absolute;
    left: 5px;
    top: 1px;
  }

  .searchBar .searchItem .inp2 .img2 {
    left: 10px;
  }

  .searchBar .searchItem .inp2 .el-input__inner {
    position: absolute;
    left: 10px;
    top: 0;
    border: none;
    /*border-left: 1px solid #cccccc;*/
  }

  .searchBar .searchItem .inp2 .line {
    color: #cccccc;
    position: absolute;
    left: 150px;
    top: -30px;
  }

  .searchBar .searchItem .vertical {
    color: #ccc;
    position: absolute;
    top: -30px;
    left: 60px;
  }

  .searchBar .searchItem .seartBtn {
    width: 100px;
    height: 40px;
    position: absolute;
    right: 0;
    top: 30px;
    background-color: #fb9b10;
    border: none;
  }

  /* 筛选区域样式*/
  .screenBox {
    width: 100%;
    height: 80px;
    box-shadow: 0 0 10px #cccccc;
  }

  .screenBox .screenItem {
    width: 1200px;
    height: 80px;
    /*border-right: 1px solid #ff9602;*/
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-flow: row;


  }

  .screenBox .screenItem .ItemSon {
    width: 125px;
    height: 80px;
    border-right: 1px solid #ccc;
    /*line-height: 80px;*/
    padding: 0 15px 0 15px;
  }

  .screenBox .screenItem .ItemSon h3 {
    line-height: 80px;
  }

  .screenBox .screenItem .ItemSon p {
    font-weight: 600;
    color: #333333;
    margin: 5px 0 5px 0;
  }

  .screenBox .screenItem .ItemSon .btn {
    margin-top: 30px;
  }

  .screenBox .screenItem .ItemSon .btn01 {
    background-color: #ad2022;
    color: #FFFFFF;
    font-weight: bold;
  }

  .screenBox .screenItem .ItemSon .btn02 {
    background-color: #e6e6e6;
    color: #999999;
    font-weight: bold;
  }

  /*  主体内容*/
  .subjectBox {
    width: 99%;
    height: 750px;
    /*border: 1px solid #000000;*/
    margin-top: 15px;
    background-color: #fafafa;
    overflow-y: scroll;
  }

  .subjectBox .contentBox {
    width: 1200px;
    height: 100%;
    /*background-color: #ccc;*/
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-flow: row;
    flex-direction: row;
    background-color: #fff;
  }

  /*楼房列表地图模式*/
  .subjectBox .contentBox .listContent {
    width: 50%;
    height: 100%;
    /*border: 1px solid #333333;*/

  }

  .subjectBox .contentBox .listContent #tab-first {
    background-color: #ad2022 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    border-radius: 5px 0 0 5px !important;
  }

  .subjectBox .contentBox .listContent #tab-second {
    background-color: #e6e6e6 !important;
    color: #999999 !important;
    font-weight: bold !important;
    border-radius: 0 5px 5px 0 !important;
  }

  .subjectBox .contentBox .tabs {
    position: relative !important;
  }

  .subjectBox .contentBox .tabs .pageChange {
    position: absolute;
    top: 0;
    right: 30px;
    font-weight: bold;
    color: #333333;
  }

  .subjectBox .contentBox .tabs .pageChange img {
    margin: 5px 5px 0 0;
  }

  .subjectBox .contentBox .commodity {
    width: 90%;
    height: 80%;

    /*border: 1px solid #000000;*/
  }

  .subjectBox .contentBox .commodity .sort {
    width: 100%;
    height: 30px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: space-around;
    flex-flow: row;
    flex-direction: row;
  }

  .subjectBox .contentBox .commodity .sort .sortName {
    width: 100px;
    height: 30px;
    /*border: 1px solid #000000;*/
  }

  .subjectBox .contentBox .commodity .sort .sortName span {
    font-size: 12px;
    line-height: 30px;
    color: #999999;
    background-color: #f5f5f5;
    padding: 5px;
    border-radius: 2px;
  }

  .subjectBox .contentBox .commodity .exhibition {
    width: 100%;
    height: 630px;
    /*border: 1px solid skyblue;*/
    margin-top: 15px;
    overflow: auto;
  }

  .subjectBox .contentBox .commodity .exhibition .cardItem {
    width: 99%;
    height: 205px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow: row;
    box-shadow: 0 0 10px #cccccc;
    margin-top: 15px;
    overflow: auto;

  }

  .subjectBox .contentBox .commodity .exhibition .cardItem .exhibitionImg {
    width: 170px;
    height: 100%;
    /*border: 1px solid #000;*/
    position: relative;
  }

  .subjectBox .contentBox .commodity .exhibition .cardItem .exhibitionImg .imgJ {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .subjectBox .contentBox .commodity .exhibition .cardItem .exhibitionInfo {
    width: 300px;
    height: 100%;
    /*border: 1px solid #000;*/
    text-align: left;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-flow: column;
  }

  .subjectBox .contentBox .commodity .exhibition .cardItem .exhibitionInfo .sotes span {
    font-size: 12px;
    color: #999999;
    font-weight: bold;
  }

  .subjectBox .contentBox .commodity .exhibition .cardItem .exhibitionInfo .addName span {
    font-size: 12px;
    font-weight: bold;
  }

  .subjectBox .contentBox .commodity .exhibition .cardItem .exhibitionInfo .priceName span {
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    background-color: #f2e9dc;
  }

  .subjectBox .contentBox .commodity .exhibition .cardItem .exhibitionInfo .sizeName {
    font-size: 12px;
    font-weight: bold;
  }

  /*  地图*/
  .subjectBox .contentBox .mapContent {
    width: 50%;
    height: 750px;
    background-color: #ccc;
  }

  /*  列表模式*/
  .subjectBox .listPattern {
    width: 1200px;
    height: 100%;
    /*border: 1px solid #000;*/
    margin: 0 auto;
    background-color: #fff;

  }

  .subjectBox .listPattern #tab-first {
    background-color: #ad2022 !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    border-radius: 5px 0 0 5px !important;
  }

  .subjectBox .listPattern #tab-second {
    background-color: #e6e6e6 !important;
    color: #999999 !important;
    font-weight: bold !important;
    border-radius: 0 5px 5px 0 !important;
  }

  .subjectBox .listPattern .commodity {
    width: 100%;
    height: 80%;
    /*border: 1px solid #000000;*/
  }

  .subjectBox .listPattern .commodity .sort {
    width: 100%;
    height: 30px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: flex-end;
    flex-flow: row;
    flex-direction: row;
    position: relative;
  }

  .subjectBox .listPattern .commodity .sort .sortName {
    width: 100px;
    height: 30px;
    /*border: 1px solid #000000;*/
  }

  .subjectBox .listPattern .commodity .sort .sortName span {
    font-size: 12px;
    line-height: 30px;
    color: #999999;
    background-color: #f5f5f5;
    padding: 5px;
    border-radius: 2px;
  }

  .subjectBox .listPattern .listCart {
    width: 95%;
    height: 350px;
    /*border: 1px solid #000;*/
    margin: 30px auto;
    border-radius: 20px;
    box-shadow: 0 10px 5px #f0f0f0;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow: row;
    padding:30px;
  }

  .subjectBox .listPattern .listCart .floorInfo {
    /*border: 1px solid #000;*/
    width: 50%;
    height: 350px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    flex-flow: column;
    flex-direction: column;
  }
  .subjectBox .listPattern .listCart .floorInfo .floorType{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow: row;
 }
  .subjectBox .listPattern .listCart .floorInfo .floorStyle {
    color: #999999;
    font-weight: bold;
    font-size: 16px;
  }

  .subjectBox .listPattern .listCart .floorInfo .floorAdd {
    color: #333333;
    font-weight: bold;

    /*font-size: 14px;*/

  }

  .subjectBox .listPattern .listCart .floorInfo .floorNum {
    /*border: 1px solid #000;*/
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-flow: row;
  }

  .subjectBox .listPattern .listCart .floorInfo .floorNumL {
    width: 50%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow: row;
    /*border: 1px solid #000;*/
  }

  .subjectBox .listPattern .listCart .floorInfo .floorNumL .imgInfo {
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    flex-direction: row;

  }

  .subjectBox .listPattern .listCart .floorInfo .floorNumL .imgInfo .txtInfo {
    padding-left: 15px;
    line-height: 20px;
    /*font-size: 1px;*/
    color: #999999;
    font-weight: bold;
  }

  .subjectBox .listPattern .listCart .floorInfo .floorNum .floorNumR {
    width: 40%;
    /*border: 1px solid #000;*/
    text-align: right;
  }

  .subjectBox .listPattern .listCart .floorInfo .floorNum .floorNumR span {
    background-color: #f5f5f5;
    padding: 5px;
    font-weight: bold;
    color: #999999;
    border-radius: 5px;
  }
  .subjectBox .listPattern .listCart .floorInfo  .floorSizes{
    width: 100%;
    height: 80px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow: row;
  }
  .subjectBox .listPattern .listCart .floorInfo  .floorSizes .infoBtn span{
    padding: 5px;
    border-radius: 5px;
    background-color: #f2e9dc;
    margin-right: 15px;
  }

</style>
